<template>
    <!-- 短信登入 -->
    <div class="box2">
        <h1 class="h11">短信登入</h1>
        <el-form-item label="手机号">
            <el-input maxlength="11" class="captcha phone" v-model="phoneNumber"></el-input>
            <span v-text="msg" @click="sendSms" class="captcha-svg"
                style="color: #888; font-weight:bolder; 45px; text-decoration: underline; user-select: none">
            </span>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input v-model="code" ></el-input>
        </el-form-item>

        <el-form-item>
            <el-button class="bt11" type="primary" @click="submit">提交</el-button>
        </el-form-item>

    </div>
</template>
<script>
import * as api from "@/api/login"
export default {
    props: {
        storeageUserInfo: {
            require: true
        }
    },
    data() {
        return {
            msg: "获取验证码",
            flag: true,
            phoneNumber: '',
            code: ""
        }
    },
    methods: {
        async sendSms() {
            if (this.flag) {
                this.flag = false //关
                //调用接口获取手机验证码
                let res = await api.getSmsCode(this.phoneNumber)
                // console.log(res);
                let delay = 5
                this.msg = `${delay}s后重发`
                this.interval = setInterval(() => {
                    delay--
                    if (delay < 1) {
                        this.msg = "获取验证码"
                        clearInterval(this.interval)
                        this.flag = true //开
                    } else {
                        this.msg = `${delay}s后重发`
                    }
                }, 1000)
            }
        },
        async submit() {
            let res = await api.smsLogin(this.code)
            // console.log(res);
            //如果登入成功
            if(res.data.state){
                //存token permission userInfo
                this.storeageUserInfo(res.data)
                //跳转页面
                this.$router.push('/')
            }
        }
    }
}
</script>
<style scoped lang="less">
// box2
/deep/ .cap{
    svg{
        width:100px;
    }
}
.box2 {
    width: 400px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 100px;
    left: 200px;
    overflow: hidden;
}

.h11 {
    color: aliceblue;
    margin: 60px 0 40px 130px;
}

.bt11 {
    width: 200px;
}

.el-input {
    /deep/ .el-input__inner {
        width: 200px;
    }
}

/deep/ .el-form-item__label {
    color: #fff;
}

.ipt {
    /deep/ .el-input__inner {
        width: 120px;
        border-radius: 4px 0 0 4px;
        box-sizing: none;
        transition: none;
        box-shadow: none
    }
}
/deep/ .captcha {
    width: 100px;
    vertical-align: top;
    font-size: 10px;

    .el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
    }
}

.captcha-svg {
    background: #fff;
    // display: inline-block;
    height: 45px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0px 5px 5px 0;
}


</style>